<template>
  <div id="bideli">
    <!-- 头图 -->
    <div class="topBg">
      <div class="pageInfo">
        <img class="pageInfoTitle" :src="bideliText">
        <p class="pageTitleDes"><span>{{$t('myAdd.bideli.qualityDigital')}}</span><span class="beforeAndAfter">{{$t('myAdd.bideli.robustIncome')}}</span><span class="">{{$t('myAdd.bideli.safetyRisk')}}</span></p>
      </div>
    </div>
    <!-- 个人记录 -->
    <div class="personRecord pointer front-color">
      <div class="my_investment" @click="toBideliRecord('myInvestment')">
        <div class="iconDiv borderbox"><i class="icon-money fontsize18"></i></div>
        <div class="text">{{$t('myAdd.bideli.myPosition')}}</div>
      </div>
      <div class="income_detail" @click="toBideliRecord('incomeDetail')">
        <div class="iconDiv borderbox"><i class="icon-bill fontsize18"></i></div>
        <div class="text">{{$t('myAdd.bideli.incomeBreakdown')}}</div>
      </div>
    </div>
    <!-- 走马灯 -->
    <div class="bideliRecord_Banner front-color" v-if="snapRecordDataLeng && hotProductsDataLeng && financialProductDataLeng">
      <div class="bideliRecord_Banner_middle">
        <div class="bideliCont_Banner_icon">
          <i class="icon-broadcast fontsize20"></i>
        </div>
        <div class="bideliCont_Banner_info">
          <transition name="move">
            <ul ref="bannerInfoUl">
              <li v-for="(item, index) in snapRecordData" :key="index">
                <span> {{$t('myAdd.bideli.userSnapUp', {user: item.username, coin: item.quantity + ' ' + item.symbol})}}</span>
              </li>
            </ul>
          </transition>
        </div>
      </div>
    </div>
    <!-- 热门产品 内容区 -->
    <div class="product_cont">
      <!-- 热门产品 -->
      <div class="hot clearfix">
        <span class="hot_title">{{$t('myAdd.bideli.popular')}}</span>
      </div>
      <div class="product clearfix">
        <div class="product_item front-color" v-if="hotProductsDataLeng" v-for="(item, index) in hotProductsData" :key="index">
          <div class="logo"><img :src="coinList && coinList[item.symbol].icon" alt=""></div>
          <div class="name fontsize20">{{item.title}}</div>
          <div class="percentage"><span class="num">{{_P.accMul(item.fee, 100)}}</span><span class="symbol fontsize20">%</span></div>
          <div class="statement">{{$t('myAdd.bideli.expectedRateOfReturn')}}</div>
          <div class="btn" :class="{sale_time: item.stime > 0}"  @click="toBideliBuying(item)">
            <button v-if="item.stime <= 0 && item.status === 1">{{productStatus(item)}}</button>
            <span v-else-if="item.stime > 0 && item.status === 1">{{productStatus(item)}}</span>
            <span v-else>{{productStatus(item)}}</span>
          </div>
        </div>
        <noData v-if="!hotProductsDataLeng"></noData>
      </div>
    </div>
    <div class="management_cont front-color">
      <div class="management_cont_Info">
        <div class="title">{{$t('myAdd.bideli.recommended')}}</div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <td class="rate_return textIndent"><span class="text" @click="rateSort('fee')">{{$t('myAdd.bideli.rateOfReturn')}}<span class="ascending pointer" :class="{showActive: sortName === 'fee' && sortType === 'up'}"></span><span class="deescending pointer" :class="{showActive: sortName === 'fee' && sortType === 'down'}"></span></span></td>
                <td class="term"><span class="text" @click="periodSort('period')">{{$t('myAdd.bideli.revenueCycle')}}<span class="ascending pointer" :class="{showActive: sortName === 'period' && sortType === 'up'}"></span><span class="deescending pointer" :class="{showActive: sortName === 'period' && sortType === 'down'}"></span></span></td>
                <td class="name">{{$t('myAdd.bideli.productName')}}</td>
                <td class="amount">{{$t('myAdd.bideli.numberOfStarts')}}</td>
                <td class="remaining">{{$t('myAdd.bideli.remainingBuyableQuantity')}}</td>
                <td class="operating">{{$t('myAdd.bideli.operating')}}</td>
              </tr>
              <tr v-if="financialProductDataLeng"  v-for="(item, index) in financialProductData" :key="index">
                <td class="rate_return rate_return_data">
                  <p class="rate_return_percentage">{{_P.accMul(item.fee, 100)}}%</p>
                  <p class="rate_return_text fontsize14">{{$t('myAdd.bideli.expectedRateOfReturn')}}</p>
                </td>
                <td class="term days fontsize18">{{$t('myAdd.bideli.days', {period: item.period})}}</td>
                <td class="name">{{item.title}}</td>
                <td class="amount">{{item.lower}} {{item.symbol}}</td>
                <td class="remaining">{{$t('myAdd.bideli.theAbove', {upper: item.upper, symbol: item.symbol})}}</td>
                <td class="operating" :class="{sale_time: item.stime > 0}"  @click="toBideliBuying(item)">
                  <button v-if="item.stime <= 0 && item.status === 1">{{productStatus(item)}}</button>
                  <span v-else-if="item.stime > 0 && item.status === 1">{{productStatus(item)}}</span>
                  <span v-else>{{productStatus(item)}}</span>
                </td>
              </tr>
            </tbody>
          </table>
          <noData v-if="!financialProductDataLeng"></noData>
        </div>
      </div>
    </div>
    <div class="problem front-color">
      <div class="middle_cont">
        <h1 class="areaTitle"><span class="line left"></span>{{$t('myAdd.bideli.commonProblem')}}<span class="line right"></span></h1>
        <div class="rule" v-html="commonProblemDes"></div>
      </div>
    </div>
    <span v-if="baseData"></span>
    <el-dialog
      title=""
      :flag='userPrompt'
      name= 'userPrompt'
      :width='450'
      :dialogClose='closeDialog'>
      <div class="userPromit fontsize24" slot="content">
        {{$t('myAdd.bideli.userPrompt')}}
      </div>
      <div slot="options">
        <router-link tag="button" :to="{path: '/openPlatform'}">{{$t('myAdd.bideli.toOpenPlatform')}}</router-link>
        <button @click="toBideliRecord('myInvestment')">{{$t('myAdd.bideli.myPosition')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import $ from 'jquery'
  import noData from '@/components/addPage/common/noData'
  import elDialog from '@/components/common/addCommon/dialog'
  export default {
    name: 'bideli',
    components: { noData, elDialog },
    data () {
      return {
        snapRecordData: [], // 抢购记录
        hotProductsData: [], // 热门产品
        financialProductData: [], // 为你推荐
        bideliText: require('../../../static/static/addImg/saveMoneyLive/bideliText.png'),
        commonProblemDes: '',
        sortName: null,
        sortType: null,
        userPrompt: false
      }
    },
    mounted () {
      this.depositInterest()
      this.getCommonProblem()
    },
    computed: {
      ...mapState({
        baseData ({baseData}) {
          if (baseData.isReady) {
            return baseData
          } else {
            return false
          }
        }
      }),
      snapRecordDataLeng () { // 抢购
        return this.snapRecordData.length
      },
      hotProductsDataLeng () {
        return this.hotProductsData.length
      },
      financialProductDataLeng () {
        return this.financialProductData.length
      },
      coinList () {
        return this.baseData._coinList
      },
      Internationalization () {
        return {
          buyNow: this.$t('myAdd.bideli.buyNow'), // 立即抢购
          soldOut: this.$t('myAdd.bideli.soldOut'), // 已售完
          closed: this.$t('myAdd.bideli.closed') // 已售完
        }
      }
    },
    methods: {
      // 走马灯动画
      animation () {
        let $ul = $(this.$refs.bannerInfoUl)
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          $ul.animate({
            left: -350
          }, 5000, 'linear', () => {
            $ul.css('left', 0)
            $ul.append($ul.children().eq(0))
          })
          this.animation()
        }, 5000)
      },
      // 用户注册接口
      depositInterest () {
        this.axios({
          url: this.$store.state.url.bideli.deposit_interest,
          method: 'POST',
          headers: {},
          params: {}
        }).then(res => {
          const _this = this
          if (res.code.toString() === '0') {
            this.snapRecordData = []
            this.hotProductsData = []
            this.financialProductData = []
            let data = res.data
            this.snapRecordData = data.newList
            this.hotProductsData = data.recommendMap
            this.financialProductData = data.configList
            this.$nextTick(() => {
              let widthVal = _this.snapRecordDataLeng * 350
              if (this.snapRecordData.length) _this.$refs.bannerInfoUl.style.width = widthVal + 'px'
            })
            this.animation()
            // 当所有理财产品 抢空 提示 用户 去 开创区
            if (!this.hotProductsData.length && !this.financialProductData.length) {
              this.userPrompt = true
            }
          } else {
            this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
          }
        })
      },
      // 产品状态
      productStatus (item) {
        let showStatus
        switch (item.status) {
          case 0:
            showStatus = this.Internationalization.closed
            break
          case 1:
            item.stime <= 0 && (showStatus = this.Internationalization.buyNow)
            item.stime > 0 && (showStatus = this._P.timeFilter(item.saleTime))
            break
          case 2:
            showStatus = this.Internationalization.soldOut
            break
        }
        return showStatus
      },
      // 去 购买页面
      toBideliBuying (item) {
        this.$router.push({
          path: '/bideliBuy',
          query: {
            id: item.id,
            symbol: item.symbol
          }
        })
      },
      // 去币得利界面
      toBideliRecord (tab) {
        this.$router.push({
          path: '/bideliRecord',
          query: {
            tab: tab
          }
        })
      },
      // 常见问题
      getCommonProblem () {
        this.axios({
          url: this.$store.state.url.bideli.common_problem,
          method: 'POST',
          params: {},
          headers: {}
        }).then(res => {
          if (res.code.toString() === '0') {
            this.commonProblemDes = res.data
          } else {
            this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
          }
        })
      },
      // 升序
      rateSort (fee) {
        if (fee !== this.sortName || this.sortType === 'up') {
          this.financialProductData = this._P.sortByKey(this.financialProductData, fee)
          this.sortName = fee
          this.sortType = 'down'
        } else {
          this.sortType = 'up'
          this.financialProductData = this._P.sortByKey(this.financialProductData, fee).reverse()
        }
      },
      // 降序
      periodSort (period) {
        if (period !== this.sortName || this.sortType === 'up') {
          this.financialProductData = this._P.sortByKey(this.financialProductData, period)
          this.sortName = period
          this.sortType = 'down'
        } else {
          this.sortType = 'up'
          this.financialProductData = this._P.sortByKey(this.financialProductData, period).reverse()
        }
      },
      closeDialog () {
        this.userPrompt = false
      }
    }
  }
</script>

